<template>
  <div class="kdyzyfw">
    <div class="One" v-show="Status === 0">
      <el-card class="center1">
        <el-form :inline="true" :model="form" label-width="110px">
          <el-form-item label="快递员姓名 :">
            <el-input placeholder="请输入快递员姓名" v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="快递员手机 :">
            <el-input placeholder="请输入快递员手机号" v-model="form.phone"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button class="formSubmit" color="#e15536" type="primary" @click="onSubmit">搜索</el-button>
            <el-button @click="onClear">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>

      <el-card class="bottom1">
        <div>
          <el-button icon="Plus" color="#e15536" type="primary" class="allocation">分配快递员</el-button>
        </div>
        <div>
          <el-table border :data="tableData" style="width: 100%">
            <el-table-column prop="a" label="序号" width="70px" />
            <el-table-column prop="fetchID" label="编号" />
            <el-table-column prop="courierName" label="姓名" />
            <el-table-column prop="addresserPhone" label="手机号" />
            <el-table-column prop="subsidiaryOrgan" label="所属机构" />
            <el-table-column prop="addresserAppUser" label="快递员App账号" />
            <el-table-column label="操作" width="250px">
              <template #default="scope">
                <el-button @click="allocation(scope.row)" class="TextButton" type="warning" text>作业范围分配
                </el-button> |
                <el-button @click="particulars(scope.row)" class="TextButton" type="primary" text>快递员详情
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pagination">
          <el-pagination v-model:currentPage="currentPage4" v-model:page-size="pageSize4" :page-sizes="[2, 3, 4, 6]"
            :small="small" :disabled="disabled" :background="background"
            layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />

        </div>
      </el-card>
    </div>

    <div v-show="Status === 1" class="allocation">
      <div class="top">
        <el-card>
          <div class="top-main">
            <span>作业范围分配</span>
            <div class="edit">
              <div>
                <el-button style="color: #fff;background-color: #ff643d;">编辑</el-button>
              </div>
              <div>
                <el-button color="#ff643d" plain @click="GoBack(0)">返回</el-button>
              </div>
            </div>
          </div>
          <div class="center">
            <baidu-map :scroll-wheel-zoom="true" class="bm-view" center="北京市" zoom="12">
              <bm-navigation class="navigation" anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
            </baidu-map>
          </div>
        </el-card>
      </div>

    </div>

    <div v-show="Status === 2" class="particulars">
      <!-- <button>GoBack</button> -->
      <div class="left">
        <el-card>
          <span>基本信息</span>
        </el-card>
      </div>
      <div class="right">
        <el-card>
          <div>基本信息</div>
          <div class="from">
            <el-form :inline="true" :model="formInline" label-width="85px" class="demo-form-inline">
              <el-form-item label="员工编号">
                <el-input disabled v-model="formInline.fetchID" />
              </el-form-item>
              <el-form-item label="快递员姓名">
                <el-input disabled v-model="formInline.courierName" />
              </el-form-item>
              <el-form-item label="所属机构">
                <el-input disabled v-model="formInline.subsidiaryOrgan" />
              </el-form-item>
              <el-form-item label="电话">
                <el-input disabled v-model="formInline.addresserPhone" />
              </el-form-item>
            </el-form>
          </div>
          <el-divider class="divder" />
          <div class="goback">
            <el-button color="#ff643d" plain @click="GoBack(0)">返回</el-button>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import axios from 'axios'
import { onMounted, ref } from 'vue'

const Status = ref(0)

const form = ref({
  name: "",
  phone: ""
})

const formInline = ref({
  fetchID: "",
  courierName: "",
  subsidiaryOrgan: "",
  addresserPhone: "",
})

const currentPage4 = ref(1)

const pageSize4 = ref(3)

const total = ref(0)

const value = ref()
const tableData = ref([])

const getData = (pagesize, pagenum, couriername, addresserphone) => {
  axios.get("/kdyzyfw?pagesize=" + pagesize + "&pagenum=" + pagenum + "&courierName=" + couriername + "&addresserPhone=" + addresserphone).then(res => {
    res.data.data.forEach((item, index) => {
      item.a = index + 1
    })
    tableData.value = res.data.data
    total.value = res.data.total
  })
}

const onSubmit = () => {
  getData(pageSize4.value, currentPage4.value, form.value.name, form.value.phone)
  // axios.get("/kdyzyfw?pagesize=6&pagenum=1&courierName=快递员001&addresserPhone=17712345678").then(res=>{
  //   console.log(res.data,222);
  // })
}

const onClear = () => {
  form.value.name = ""
  form.value.phone = ""
  pageSize4.value = 3
  currentPage4.value = 1
  getData(pageSize4.value, currentPage4.value, form.value.name, form.value.phone)
}

const GoBack = (id) => {
  Status.value = 0
}
const allocation = (value) => {
  Status.value = 1
}
const particulars = (data) => {
  formInline.value.fetchID = data.fetchID
  formInline.value.courierName = data.courierName
  formInline.value.subsidiaryOrgan = data.subsidiaryOrgan
  formInline.value.addresserPhone = data.addresserPhone
  Status.value = 2
}

const handleSizeChange = (a) => {
  pageSize4.value = a
  getData(a, currentPage4.value, form.value.name, form.value.phone)
}

const handleCurrentChange = (a) => {
  currentPage4.value = a
  getData(pageSize4.value, a, form.value.name, form.value.phone)
}

onMounted(() => {
  getData(pageSize4.value, currentPage4.value, form.value.name, form.value.phone)
})

</script>

<style lang="less" scoped>
// .el-card {
//   --el-card-padding: 0px;
// }
.kdyzyfw {
  width: 100%;
  box-sizing: border-box;

  .One {
    width: 96%;
    height: 100%;
    margin: 20px;
    box-sizing: border-box;

    .center1 {
      width: 100%;
      margin: 0;
      padding: 0;
      // margin-top: 50px;

      .el-form-item {
        // height: 78px;
        margin: 0;

        .el-form-item__label {
          width: 100px !important;
          height: 78px;
          line-height: 78px;
          margin-left: 20px;
          text-align: center;
        }

        .el-input {
          height: 40px;
        }

        .el-select {
          width: 380px;
          height: 40px;
        }

        .selects {
          width: 100px;
          height: 40px;
          margin-left: 20px;
        }

        button {
          width: 90px;
          height: 36px;
        }
      }

      .formSubmit {
        margin-left: 150px;
        margin-right: 20px;
      }
    }

    .bottom1 {
      // margin: 0;
      // padding: 20px;
      margin-top: 20px;

      .allocation {
        width: 120px;
        height: 42px;
      }

      .el-table {
        margin-top: 20px;
        text-align: center;

        .TextButton {
          padding-left: 2px;
          box-sizing: border-box;
          // margin: 0;
          // padding: 0;
        }
      }

      .pagination {
        width: 800px;
        margin: 0 auto;
        margin-top: 30px;
      }
    }
  }

  .allocation {
    width: 100%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;

    .top {
      // height: 50px;
      width: 100%;
      // height: 100%;
      box-sizing: border-box;

      // background-color: #ff643d;
      .top-main {
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .el-card {
        width: 100%;
        // height: 100%;

        div {
          display: inline-block;
        }

        span {
          font-weight: 700;
        }

        .el-button {
          width: 100px;
          height: 40px;
          margin-left: 20px;
        }

        .edit {
          margin-left: 900px;
        }
      }

      .center {
        box-sizing: border-box;
        width: 100%;
        height: 100%;

        .bm-view {
          width: 100%;
          padding: 20px 0 0 0;
          height: 700px;

          .navigation {
            margin-top: 80px;
          }
        }
      }
    }
  }

  .particulars {
    width: 96%;
    height: 100%;
    margin: 20px;
    display: flex;

    .left {
      width: 13%;
      margin-right: 2%;

      .el-card {
        height: 100%;

        span {
          display: inline-block;
          width: 100%;
          height: 40px;
          line-height: 40px;
          padding-left: 10px;
          // text-align: center;
          font-size: 14px;
          color: #ff643d;
          cursor: pointer;
          // margin-top: 30px;
        }
      }
    }

    .right {
      width: 87%;

      .el-card {
        box-sizing: border-box;
        padding: 30px;
        height: 100%;

        div {
          width: 100%;
          height: 40px;
          line-height: 40px;
          font-weight: 900;
          font-size: 16px;
        }
      }

      .from {
        width: 100%;
        height: 10rem;
        margin-top: 30px;
        margin-left: 50px;

        .el-input {
          width: 400px;
          padding-left: 10px;
        }

        .el-form-item {
          width: 45%;

          .el-input {
            width: 300px;
          }

          label {
            width: 120px;
          }
        }

        .el-form-item:nth-child(2n) {
          float: right;
        }
      }

      .divder {
        padding-top: 0px;
        margin-top: 100px;
        box-sizing: border-box;
      }

      .goback {
        width: 90% !important;
        text-align: center;
        margin: 0 auto;

        .el-button {
          width: 120px;
          height: 40px;
          font-weight: 700;
        }
      }
    }
  }
}
</style>